<template>
  <div class="ground-live-container">
    <map2d></map2d>
    <!-- 左侧地图工具栏 -->
    <div class="map-left-tools">
      <van-popover v-model:show="showMapLayer" placement="right-start" style="z-index: 100;">
        <van-grid square clickable :border="false" column-num="3" style="width: 240px;height: 80vh;overflow: auto;">
          <van-grid-item v-for="layer in mapConfigList" :key="layer.key" @click="handleMapLayerClick(layer)">
            <div class="h-full w-full flex items-end"
              :style="{ background: `url(${mapPreviews[layer.key] || layer.thumbnail}) no-repeat center center`, backgroundSize: 'cover', borderRadius: '3px' }">
              <div class="color-#fff text-ellipsis layerTitle">
                {{ layer.name }}
              </div>
            </div>
          </van-grid-item>
        </van-grid>
        <template #reference>
          <div class="tool-btn" @click.stop="handleMapClick('mapLayer')">
            <svg-icon name="ditu" />
            <span class="font-size-10px">地图</span>
          </div>
        </template>
      </van-popover>

      <div class="tool-btn" @click="handleMapClick('site')">
        <svg-icon name="dingweiweizhi" />
        <span class="font-size-10px">站点</span>
      </div>
      <div class="tool-btn" @click="handleMapClick('radar')">
        <svg-icon name="leida" />
        <span class="font-size-10px">雷达</span>
      </div>
    </div>

    <!-- 设备管理面板 -->
    <van-floating-panel v-if="showSitePanel" v-model:height="panelHeight" :anchors="panelAnchors" :header-height="30">
      <div class="panel-drag-indicator">
        <span class="drag-handle"></span>
        <div class="drag-hint" v-if="showDragHint">上拉查看更多设置</div>
      </div>

      <div class="device-panel">
        <div class="panel-header">
          <span>设备管理</span>
          <div class="close-btn" @click="closeSitePanel">
            <van-icon name="close" />
          </div>
        </div>

        <div class="device-stats">
          <div v-for="item in deviceList" :key="item.label" class="device-stat-item" :class="{ active: item.checked }"
            @click="handleDeviceClick(item)">
            <img :src="item.icon" class="device-icon" />
            <div class="stat-data">
              <div class="stat-count">{{ item.count }}</div>
              <div class="stat-name">{{ item.name }}</div>
            </div>
          </div>
        </div>

        <div class="advanced-settings" v-show="isAdvancedMode">
          <div class="settings-title">显示设置</div>
          <div class="settings-list">
            <div class="settings-item">
              <span>聚合显示</span>
              <van-switch v-model="settings.cluster" size="18px" @change="handleClusterChange" />
            </div>
            <div class="settings-item">
              <span>图标大小</span>
              <van-slider v-model="settings.iconSize" :min="0" :max="1" :step="0.1" button-size="15px"
                style="width: 150px;" active-color="#3478f6" @change="handleIconSizeChange" />{{ settings.iconSize }}
            </div>
          </div>

          <div class="settings-title">筛选条件</div>
          <div class="filter-options">
            <van-tag plain type="primary" style="margin-right: 8px;">全部</van-tag>
            <van-tag plain>在线</van-tag>
            <van-tag plain>离线</van-tag>
            <van-tag plain>告警</van-tag>
          </div>
        </div>
      </div>
    </van-floating-panel>

    <!-- 雷达功能面板 -->
    <van-floating-panel v-if="showRadarPanel" v-model:height="radarPanelHeight" :anchors="radarPanelAnchors"
      :header-height="30">
      <div class="panel-drag-indicator">
        <span class="drag-handle"></span>
        <div class="drag-hint" v-if="showRadarDragHint">上拉查看更多设置</div>
      </div>

      <div class="radar-panel compact">
        <div class="panel-header">
          <span>雷达</span>
          <div class="close-btn" @click="closeRadarPanel">
            <van-icon name="close" />
          </div>
        </div>

        <div class="radar-element-wrapper">
          <div v-for="element in radarElements" :key="element.dictValue" 
            class="radar-element-card" 
            :class="{ active: radarSettings.selectedElementKey === element.dictValue }"
            @click="selectRadarElement(element.dictValue)">
            <span>{{ element.dictLabel }}</span>
          </div>
        </div>

        <div class="radar-time-box">
          <div class="radar-time-display" @click="showCurrentTimePicker = true">
            <div class="time-icon">
              <van-icon name="clock-o" />
            </div>
            <div class="time-text">{{ currentRadarTime }}</div>
            <div class="time-arrow">
              <van-icon name="arrow-down" />
            </div>
          </div>

          <div class="radar-control-buttons">
            <van-button :type="radarSettings.autoPlay ? 'primary' : 'default'" size="small" @click="toggleAutoPlay">
              <van-icon :name="radarSettings.autoPlay ? 'pause-circle-o' : 'play-circle-o'" />
              {{ radarSettings.autoPlay ? '暂停' : '播放' }}
            </van-button>
            <van-button size="small" @click="resetRadarTime">
              <van-icon name="replay" />重置
            </van-button>
          </div>
        </div>

        <!-- 时间轴 -->
        <div class="radar-time-axis">
          <div class="time-axis-controls">
            <div class="scroll-btn scroll-left" @click="scrollTimeAxis('left')" v-if="radarTimes.length > 0">
              <van-icon name="arrow-left" />
            </div>
            <div class="time-axis-container">
              <div class="time-axis">
                <template v-if="radarTimes.length > 0">
                  <div v-for="(time, index) in radarTimes" :key="index" class="time-point"
                    :class="{ active: currentTimeIndex === index }" @click="selectRadarTime(index, time)">
                    {{ time.label }}
                  </div>
                </template>
                <div v-else class="empty-time-data">
                  <van-empty  description="暂无时间数据" />
                </div>
              </div>
            </div>
            <div class="scroll-btn scroll-right" @click="scrollTimeAxis('right')" v-if="radarTimes.length > 0">
              <van-icon name="arrow" />
            </div>
          </div>
        </div>

        <!-- 阈值设置 -->
        <div v-if="radarSettings.selectedElement && radarSettings.selectedElement.dictValue === '4'" class="radar-settings-block" v-show="isRadarAdvancedMode">
          <div class="settings-title">
            <div class="title-icon"></div>
            <span>阈值设置</span>
          </div>
          <div class="settings-content">
            <div class="threshold-label">
              <span>{{ radarSettings.selectedElement.dictLabel || '雷达要素' }}</span>
              <span class="threshold-value">({{ radarSettings.thresholds[0] }}-{{ radarSettings.thresholds[1] }})</span>
            </div>
            <van-slider v-model="radarSettings.thresholds" range :min="0" :max="18" :step="1" 
              active-color="#3478f6" @change="handleThresholdChange" button-size="15px"/>
          </div>
        </div>
      </div>
    </van-floating-panel>

    <van-popup v-model:show="showCurrentTimePicker" position="bottom" round>
      <div class="date-picker-container">
        <van-date-picker 
          v-model="tempSelectedDate" 
          title="选择日期" 
          :min-date="new Date(2020, 0, 1)"
          :max-date="new Date(2025, 11, 31)"
          :columns-type="['year', 'month', 'day']"
          @confirm="onDateConfirm"
          @cancel="showCurrentTimePicker = false" />
      </div>
    </van-popup>
  </div>
</template>

<script src="./index.js"></script>

<style lang="scss" scoped>
@forward "./index.scss";
</style>


